{layout name="merchant/layout_iframe" /}
<style>
  .layuiadmin-card-list {
    padding: 15px
  }

  .layuiadmin-card-list p.layuiadmin-big-font {
    font-size: 36px;
    color: #666;
    line-height: 36px;
    padding: 5px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap
  }

  .layuiadmin-card-list p.layuiadmin-normal-font {
    padding-bottom: 10px;
    font-size: 20px;
    color: #666;
    line-height: 24px
  }

  .layuiadmin-badge,
  .layuiadmin-btn-group,
  .layuiadmin-span-color {
    position: absolute;
    right: 15px;
  }

  .layuiadmin-badge {
    top: 50%;
    margin-top: -9px;
    color: #01AAED;
  }
</style>
<div class="layui-row layui-col-space15">

  <div class="layui-col-sm6 layui-col-md3">
    <div class="layui-card">
      <div class="layui-card-header">
        用户量
        <span class="layui-badge layui-bg-blue layuiadmin-badge">用户</span>
      </div>
      <div class="layui-card-body layuiadmin-card-list">
        <p class="layuiadmin-big-font">{$data.guest_num}</p>
        <p>
          总计用户数量
          <span class="layuiadmin-span-color"> <i class="layui-inline layui-icon layui-icon-flag"></i></span>
        </p>
      </div>
    </div>
  </div>
  <div class="layui-col-sm6 layui-col-md3">
    <div class="layui-card">
      <div class="layui-card-header">
        对话量
        <span class="layui-badge layui-bg-cyan layuiadmin-badge">用户</span>
      </div>
      <div class="layui-card-body layuiadmin-card-list">
        <p class="layuiadmin-big-font">{$data.guest_chat_num}</p>
        <p>
          总计用户对话数量
          <span class="layuiadmin-span-color"><i class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>
        </p>
      </div>
    </div>
  </div>
  <div class="layui-col-sm6 layui-col-md3">
    <div class="layui-card">
      <div class="layui-card-header">
        客服量
        <span class="layui-badge layui-bg-blue layuiadmin-badge">客服</span>
      </div>
      <div class="layui-card-body layuiadmin-card-list">
        <p class="layuiadmin-big-font">{$data.kf_num}</p>
        <p>
          总计客服数量
          <span class="layuiadmin-span-color"><i class="layui-inline layui-icon layui-icon-flag"></i></span>
        </p>
      </div>
    </div>
  </div>
  <div class="layui-col-sm6 layui-col-md3">
    <div class="layui-card">
      <div class="layui-card-header">
        对话量
        <span class="layui-badge layui-bg-cyan layuiadmin-badge">客服</span>
      </div>
      <div class="layui-card-body layuiadmin-card-list">
        <p class="layuiadmin-big-font">{$data.kf_chat_num}</p>
        <p>
          总计对话数量
          <span class="layuiadmin-span-color"><i class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>
        </p>
      </div>
    </div>
  </div>

  <div class="layui-col-sm12">
    <div class="layui-card">
      <div class="layui-card-header">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
          <ul class="layui-tab-title">
            <li data-cat='client_browser' class="layui-this">浏览器</li>
            <li data-cat='client_os'>操作系统</li>
          </ul>
          <div class="layui-tab-content"></div>
        </div>
      </div>
      <div class="layui-card-body">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-sm12">
            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-normline">
              <div carousel-item id="LAY-index-normcol">
                <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

{include file="merchant/layout_layui" /}

<script>
  layui.extend({
    'echarts': 'echats/echarts' //echarts 核心包
    , 'echartsTheme': 'echats/echartsTheme' //echarts 主题
  }).use(['carousel', 'layer', 'element', 'echarts'], function () {
    var $ = layui.jquery
      , layer = layui.layer
      , echarts = layui.echarts
      , carousel = layui.carousel
      , device = layui.device()
      , element = layui.element;

    //轮播切换
    $('.layadmin-carousel').each(function () {
      var othis = $(this);
      carousel.render({
        elem: this
        , width: '100%'
        , arrow: 'none'
        , interval: othis.data('interval')
        , autoplay: othis.data('autoplay') === true
        , trigger: (device.ios || device.android) ? 'click' : 'hover'
        , anim: othis.data('anim')
      });
    });
    var echnormcol = [], normcol = [
      {
        title: {

        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['']
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            }
          }
        ]
      }
    ]
      , elemNormcol = $('#LAY-index-normcol').children('div')
      , renderNormcol = function (index) {
        echnormcol[index] = echarts.init(elemNormcol[index], layui.echartsTheme);
        echnormcol[index].setOption(normcol[index]);
        window.onresize = echnormcol[index].resize;
      };
    if (!elemNormcol[0]) return;
    // renderNormcol(0);
    function init_echart(){
        let _cat = $('.layui-tab-title').find('.layui-this').data('cat');
        $.post('{:url("index")}',{'cat':_cat},function(res){
            echnormcol[0] = echarts.init(elemNormcol[0], layui.echartsTheme);
            normcol[0].xAxis[0].data = res.data.xaxis;
            normcol[0].series[0].data = res.data.series;
            echnormcol[0].setOption(normcol[0]);
            window.onresize = echnormcol[0].resize;
        })
    }
    //请求图表
    init_echart();
    $(document).on('click','.layui-tab-title',()=>{
      init_echart();
    })
  });
</script>